<template>
  <div>
    <!-- 模糊查询    -->
    <el-form :inline="true" :model="fansAttention1" class="demo-form-inline">
      <el-form-item style="" label="">
        <el-input @input="onSubmit()" v-model="fansAttention1.user_nickname" placeholder="请输入用户名"></el-input>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <!--<div v-if="fansAttention==''" style="text-align: center">
        <img src="../../../assets/img/nodata.png">  v-if="fansAttention!=''"
      </div>-->
      <el-row v-for="item in fansAttention" :key=item.userId
              style="width: 100%;border-bottom:2px solid whitesmoke"
              class="text item">
        <el-avatar style="float: left" :size="65" src="https://empty">
          <img :src="item.userList.userImgsrc" @click="jumpPath(item.userList.userId)"/>
        </el-avatar>
        <!--  {{item.userList.userSuggest}}-->
        <span style="margin-left: 3%;font-size: 20px;color: red;cursor: pointer">{{ item.userList.userNickname }}</span><br><br>
        <span style="margin-left: 3%;font-family: 华文宋体">{{ item.userList.userSuggest }}</span>
        <el-button style="float: right;margin-top: -5%" v-if="item.fansState==1" @click="fansDelUpd(item)" round>{{
            isFansV
          }}
        </el-button>
        <el-button style="float: right;margin-top: -5%" v-if="item.fansState==0" @click="fansDelUpd1(item)" round>{{
            isFansV1
          }}
        </el-button>
      </el-row>
    </el-card>
    <el-row>
      <el-pagination
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout=" sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import {QueryFansBeanParticulars} from "../../../api/fans/fans";
import {offFans, onFans} from "../../../api/videos/videos";

export default {
  name: "fansBean",
  data() {
    return {
      isFansV: '关注',
      isFansV1: '互相关注',
      fansAttention: [],
      fansAttention1: {
        user_nickname: '',
      },
      currentPage: 1,
      total: 10, // 总条目数
      pages: 5,  // 总页数
      pageNum: 1, // 当前的页码
      pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
      pageSize: 10, // 每页显示条目个数
    }
  },
  created() {
    this.queryFansBeanParticulars()
  },
  methods: {
    /**
     * 粉丝互相关注 0已经互相关注 1是他只关注了我 我还没关注她
     * @param val
     */
    fansDelUpd(val) {
      console.log(val.fansState);
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      var fansUserId = val.fansUserId; //自己
      var fansbigvuserid = val.fansBigvUserId; //他人
      console.log(fansbigvuserid, fansUserId)
      if (user != null && user != '') {
        // if (val.fansState==1){
        onFans(fansUserId, fansbigvuserid).then(result => {
          if (result != 0) {
            this.$Message.success({
              content: '关注成功'
            })
            this.queryFansBeanParticulars();
          }else{
            alert(11)
          }
        });
      }
    },
    fansDelUpd1(val) {
      var fansUserId = val.fansUserId; //自己
      var fansbigvuserid = val.fansBigvUserId; //他人
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      // console.log(this.fansAttention)
      if (userId != null && userId != '') {
        this.$confirm('此操作将取消关注该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          offFans(fansbigvuserid, fansUserId).then(result => {
            if (result != 0) {
              this.$Message.success({
                content: '取消关注成功'
              })
              this.queryFansBeanParticulars();
            } else {
              alert("失败")
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关注'
          });
        });
      }
    },
    /**
     * 模糊查询
     */
    onSubmit() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      //console.log(this.fansAttention1.user_nickname);
      if (userId != null && userId != '') {
        QueryFansBeanParticulars(userId, this.fansAttention1.user_nickname, this.pageNum, this.pageSize).then(result => {
          // console.log(result.data.list.userList.userImgsrc)
          this.total = result.data.total;
          this.pages = result.data.pages;
          this.pageNum = result.data.pageNum;
          this.pageSize = result.data.pageSize;
          this.fansAttention = result.data.list;
        });
      }
    },
    /**
     * 查询关注用户信息
     */
    queryFansBeanParticulars() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      QueryFansBeanParticulars(userId, null, this.pageNum, this.pageSize).then(result => {
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.fansAttention = result.data.list
      })
    },
    /**
     * 分页方法
     * @param val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryFansBeanParticulars();
    },
    /**
     * 分页方法
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryFansBeanParticulars();
    },
    jumpPath(userId){
      let newUrl = this.$router.resolve({
        path: `/others?id=${userId}`
      });
      window.open(newUrl.href, "_blank");
    }
  }
}
</script>

<style scoped>

</style>
